
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: ScrollView: Basic ScrollView Without a Scroll Indicator</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: ScrollView: Basic ScrollView Without a Scroll Indicator</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>ScrollView: Basic ScrollView Without a Scroll Indicator</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to create a basic ScrollView widget. The base ScrollView widget doesn't have a scrollbar indicator or pagination support.</p>	</div>

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="scrollview-base_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>
    </p>

	
		</div>
	</div>
	</div>

	<h2>The Basic ScrollView Widget</h2>

<p>In this example, we'll create a basic ScrollView instance, without any additional feature plugins applied. This is the lightest version of the ScrollView widget. In later examples, we'll see how we can pull in different modules and plugins to provide additional features.</p>

<h3>Modules Used</h3>

<p>Since we only need the basic scrollview for this example, we pull in the <code>scrollview-base</code> module, the lightest version of ScrollView:</p>

<div id="syntax-6e3aeecd00d6f7f56e4d6e722a461d1b" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview-base'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ...</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview-base'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-6e3aeecd00d6f7f56e4d6e722a461d1b-plain">YUI().use('scrollview-base', function(Y) {
    ...
});
</textarea></div>
<p>The <code>scrollview-base</code> module provides a ScrollView without any plugins applied. We'll see in the <a href="scrollview.html">Scrollview With Scroll Indicators</a> example, that the <code>scrollview</code> module provides a base ScrollView bundled with scroll indicator support.</p>

<h3>Instantiating The ScrollView Widget</h3>

<p>The ScrollView provides support for scrollable content. In general this content can be anything, but most often it is in the form of a list, to be scrolled through. For this example, we'll provide the content for the scrollview in the form of a list, as shown below:</p>

<div id="syntax-95ab05b8cb08d374b3c7329d005601be" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>AC<span class="sy0">/</span>DC<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Aerosmith<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Billy Joel<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Bob Dylan<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        ...</div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>AC<span class="sy0">/</span>DC<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Aerosmith<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Billy Joel<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;</span>Bob Dylan<span class="sy0">&lt;/</span>li<span class="sy0">&gt;</span>
        ...
    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></pre></div><textarea id="syntax-95ab05b8cb08d374b3c7329d005601be-plain"><div id="scrollview-content" class="yui3-scrollview-loading">
    <ul>
        <li>AC/DC</li>
        <li>Aerosmith</li>
        <li>Billy Joel</li>
        <li>Bob Dylan</li>
        ...
    </ul>
</div></textarea></div>
<p>We add the <code>yui3-scrollview-loading</code> class as described in the <a href="http://developer.yahoo.com/yui/3/widget/index.html#hidingmarkup">Widget Progressive Enhancement</a> section, and provide a custom rule to hide this progressively enhanced content while the scrollview is being rendered:</p>

<div id="syntax-03c0a23f44b198092ff8b059f58724cb" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re1">.yui3-js-enabled</span> <span class="re1">.yui3-scrollview-loading</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re1">.yui3-js-enabled</span> <span class="re1">.yui3-scrollview-loading</span> <span class="br0">&#123;</span>
    <span class="kw1">visibility</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-03c0a23f44b198092ff8b059f58724cb-plain">.yui3-js-enabled .yui3-scrollview-loading {
    visibility:hidden;
}</textarea></div>
<p>To instantiate the ScrollView instance, we provide it with the <code>srcNode</code> attribute during construction, so it uses the markup above for it's content, as shown below. We could also add the content dynamically, however providing the markup on the page, allows users without JavaScript enabled to still see the content.</p>

<div id="syntax-f180b7944c5c81b80e6d95c1b1c18c0c" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview-base'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        id<span class="sy0">:</span><span class="st0">&quot;scrollview&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        height<span class="sy0">:</span> <span class="nu0">310</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        flick<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            axis<span class="sy0">:</span> <span class="st0">&quot;y&quot;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    scrollView.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview-base'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        id<span class="sy0">:</span><span class="st0">&quot;scrollview&quot;</span><span class="sy0">,</span>
        srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span>
        height<span class="sy0">:</span> <span class="nu0">310</span><span class="sy0">,</span>
        flick<span class="sy0">:</span> <span class="br0">&#123;</span>
            minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span>
            minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span>
            axis<span class="sy0">:</span> <span class="st0">&quot;y&quot;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    scrollView.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-f180b7944c5c81b80e6d95c1b1c18c0c-plain">YUI().use('scrollview-base', function(Y) {

    var scrollView = new Y.ScrollView({
        id:"scrollview",
        srcNode: '#scrollview-content',
        height: 310,
        flick: {
            minDistance:10,
            minVelocity:0.3,
            axis: "y"
        }
    });

    scrollView.render();
});</textarea></div>
<p>For this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction. Without the height, the ScrollView widget would be as tall as it's content list, and there would be no need to scroll. We also give the ScrollView widget bounding box an id ("scrollview") which we can target in the example CSS. Finally, we constrain flicks so that only flicks along the "y" axis are picked up.</p>

<p>As the last step, to see the functional ScrollView on the page, we call <code>scrollView.render()</code>.</p>

<h3>Controlling Sensitivity</h3>

<p>The scroll dynamics for the ScrollView widget can be controlled by tweaking the following attributes, either during construction or after:</p>

<dl>
    <dt>flick</dt>
    <dd>Defines the minimum distance and/or minimum velocity which define a flick. It can be set to 0 to disable flick support completely.</dd>

    <dt>bounce</dt>
    <dd>Defines how quickly the velocity of the scrollview content decreases during a bounce (when the scrollview hits the edge of it's scroll limits). It can be set to 0 to disable bounce completely.</dd>

    <dt>deceleration</dt>
    <dd>Defines how quickly the velocity of the scrollview content decreases in response to a flick.</dd>
</dl>

<p>Additional details about these parameters and a few other static properties which can be used to modify scroll dynamics are discussed in the <a href="http://developer.yahoo.com/yui/3/scrollview/index.html#attributes">ScrollView documentation</a>.</p>

<h3>Modifying Layout For Small Screen Devices</h3>

<p>This example also shows how you can modify the look and feel for your page/application, based on the size of the device you're delivering it to. For this example, when the maximum width of the device is 480px or less, we provide additional CSS rules which hide additional content and make the scrollview a full screen Widget, using media queries:</p>

<div id="syntax-27da79d6db1dd038fdb5a6958bd6838e" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">link</span> <span class="kw3">media</span><span class="sy0">=</span><span class="st0">&quot;handheld, only screen and (max-device-width: 480px)&quot;</span> </span></div></li><li class="li1"><div class="de1"><span class="sc2">      <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;assets/examples-smallscreen.css&quot;</span> </span></div></li><li class="li1"><div class="de1"><span class="sc2">      <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> </span></div></li><li class="li1"><div class="de1"><span class="sc2">      <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">link</span> <span class="kw3">media</span><span class="sy0">=</span><span class="st0">&quot;handheld, only screen and (max-device-width: 480px)&quot;</span> </span>
<span class="sc2">      <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;assets/examples-smallscreen.css&quot;</span> </span>
<span class="sc2">      <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> </span>
<span class="sc2">      <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span>&gt;</span></pre></div><textarea id="syntax-27da79d6db1dd038fdb5a6958bd6838e-plain"><link media="handheld, only screen and (max-device-width: 480px)" 
      href="assets/examples-smallscreen.css" 
      type="text/css" 
      rel="stylesheet"></textarea></div>
<p>The CSS in the above file, which is only served to devices matching the criteria in the <code>media</code> attribute, hides additional content and makes the ScrollView fill the width of the browser:</p>

<div id="syntax-14b145da319783e24ab753fc90db2e7c" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re0">#additional-content</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">display</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="re1">.yui3-scrollview</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">margin</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">width</span><span class="sy0">:</span><span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">float</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re0">#additional-content</span> <span class="br0">&#123;</span>
    <span class="kw1">display</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re1">.yui3-scrollview</span> <span class="br0">&#123;</span>
    <span class="kw1">border</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">margin</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span>
    <span class="kw1">width</span><span class="sy0">:</span><span class="re3"><span class="nu0">100</span>%</span><span class="sy0">;</span>
    <span class="kw1">float</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-14b145da319783e24ab753fc90db2e7c-plain">#additional-content {
    display:none;
}

.yui3-scrollview {
    border:0;
    margin:0;
    width:100%;
    float:none;
}</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    ScrollView Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../scrollview/scrollview-base.html'>Basic ScrollView Without a Scroll Indicator</a></li><li><a href='../scrollview/scrollview.html'>ScrollView with Scroll Indicator and Link Suppression Behavior.</a></li><li><a href='../scrollview/scrollview-horiz.html'>Horizontal ScrollView</a></li><li><a href='../scrollview/scrollview-paging.html'>ScrollView Paginator Plugin</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More ScrollView Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/scrollview/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_scrollview.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
